<template>
  <div class="threee-level-area-wrap">
    <template v-if="selectType === 'province'">
      <el-select
        v-model="province"
        :disabled="disabled"
        :placeholder="placeholder"
        :clearable="clearable"
        :style="widthStyle"
        filterable
        class="filter-120"
        popper-class="global-select-down"
        size="small"
        name="filterField">
        <el-option
          v-for="opt in allProvinceAndCityData"
          :key="opt.value"
          :label="opt.label"
          :value="opt.label" />
      </el-select>
    </template>
    <el-cascader
      v-else
      :style="widthStyle"
      :options="optionsData"
      :value="switchSelect"
      :disabled="disabled"
      :clearable="clearable"
      :placeholder="placeholder"
      :separator="separator"
      :size="cascaderSize"
      filterable
      @change="handleChange"/>
  </div>
</template>
<script>
import {
  allProvinceAndCityData,
  allRegionData,
  allTextToCode,
  allCodeToText
} from '@/utils/areaConfig';
export default {
  props: {
    // region: 省市区 city: 省市二级 province: 省级
    selectType: {
      type: String,
      default: 'region'
    },
    selectedOptions: {
      type: Array | String, // 高级筛选时为字符串，需兼容
      default: () => []
    },
    disabled: {
      type: Boolean,
      default: false
    },
    placeholder: {
      type: String,
      default: ''
    },
    clearable: {
      type: Boolean,
      default: false
    },
    separator: {
      type: String,
      default: '/'
    },
    cascaderSize: {
      type: String,
      default: 'large'
    },
    widthStyle: {
      type: Object,
      default: () => ({
        width: '240px'
      })
    }
  },
  data() {
    return {
      allProvinceAndCityData
    };
  },
  computed: {
    switchSelect() {
      const selectSwitch = [];
      let selectedOptions = [];
      if (Array.isArray(this.selectedOptions)) {
        selectedOptions = this.selectedOptions;
      } else if (this.selectedOptions && this.selectedOptions.indexOf(this.separator) >= 0) {
        selectedOptions = this.selectedOptions.split(this.separator);
      }
      for (let i = 0; i < selectedOptions.length; i++) {
        if (selectedOptions[i]) {
          let d = 0;
          let result = allTextToCode;
          while (d <= i) {
            result = result[selectedOptions[d]];
            d++;
          }
          if (result) selectSwitch.push(result.code);
        }
      }
      return selectSwitch;
    },
    province: {
      get() {
        if (this.selectedOptions) {
          if (Array.isArray(this.selectedOptions)) {
            if (this.selectedOptions.length) {
              return this.selectedOptions[0];
            } else {
              return '';
            }
          } else {
            return this.selectedOptions.split('-')[0];
          }
        } else {
          return '';
        }
      },
      set(val) {
        this.$emit('update:options', val ? [val] : []);
      }
    },
    optionsData() {
      return this.selectType === 'region' ? allRegionData : allProvinceAndCityData;
    }
  },
  methods: {
    handleChange(value) {
      const selectResult = [];
      value.forEach(item => {
        item && selectResult.push(allCodeToText[item]);
      });
      this.$emit('update:options', selectResult);
    }
  }
};
</script>
<style lang="scss">
.threee-level-area-wrap {
  .el-input__inner {
    height: 32px;
    line-height: 32px;
  }
  .el-input__icon {
    line-height: 32px;
  }
  .el-form-item {
    margin-bottom: 0;
  }
  .el-select {
    max-width: 100%;
    .el-input {
      .el-select__caret {
        color: #333333;
      }
    }
  }
  .el-icon-arrow-up:before {
    color: #C0C4CC;
  }
}
</style>
